import React, { forwardRef, useContext, useState, useEffect } from "react"
import useMergeProps from "@/hooks/useMergeProps"
import { ConfigContext } from "../config-provider"
import { cs, isObject, isArray, responsiveArray, ResponsiveObserver } from "../../utils"
import { RowContext } from "./context"
const defaultProps = {
    gutter: 0,
    align: "start",
    justify: "start"
}
/**
 *
 * @param {Object} props
 * @param {React.RefObject} ref
 * @param {boolean} [props.div] 开启这个选项 <Row> 和 <Col> 都会被当作 div 而不会附带任何 Grid 相关的类和样式
 * @param {'start' | 'center' | 'end' | 'stretch'} [props.align] 竖直对齐方式 ( align-items )
 * @param {'start' | 'center' | 'end' | 'space-around' | 'space-between'} 水平对齐方式 (justify-content)
 * @param {string | string[]} [props.className] 节点类名
 * @param {React.CSSProperties} [props.style] 节点样式
 * @param {number | Array | Object} [props.gutter] 栅格间隔，单位是px 栅格间隔。可传入响应式对象写法 { xs: 4, sm: 6, md: 12}，传入数组 [ 水平间距， 垂直间距 ] 来设置两个方向。
 * @returns {React.ReactNode}
 */
const RowComponent = (rowProps, ref) => {
    const { getPrefixCls } = useContext(ConfigContext)
    const props = useMergeProps(rowProps, defaultProps)
    const {
        className,
        style,
        children,
        div,
        align,
        justify,
        gutter
    } = props
    const [screens, setScreens] = useState({
        xs: true,
        sm: true,
        md: true,
        lg: true,
        xl: true,
        xxl: true,
        xxxl: true
    })
    useEffect(() => {
        const token = ResponsiveObserver.subscribe((screens) => {
            if ((!isArray(gutter) && isObject(gutter)) ||
                (isArray(gutter) && (isObject(gutter[0]) || isObject(gutter[1])))) {
                setScreens(screens)
            }
        })
        return () => {
            ResponsiveObserver.unsubscribe(token)
        }
    }, [])
    function getGutter(gutter) {
        let result = 0
        if (isObject(gutter)) {
            for (let i = 0; i < responsiveArray.length; i++) {
                const breakPoint = responsiveArray[i]
                if (screens[breakPoint] && gutter[breakPoint] !== undefined) {
                    result = gutter[breakPoint]
                    break
                }
            }
        } else {
            result = gutter
        }
        return result
    }
    const prefixCls = getPrefixCls("row")
    const classNames = cs(
        {
            [`${prefixCls}`]: !div,
            [`${prefixCls}-align-${align}`]: align,
            [`${prefixCls}-justify-${justify}`]: justify,
        },
        className
    )
    const mergeStyle = {}
    const gutterHorizontal = getGutter(isArray(gutter) ? gutter[0] : gutter)
    const gutterVertical = getGutter(isArray(gutter) ? gutter[1] : 0)
    if ((gutterHorizontal || gutterVertical) && !div) {
        const marginHorizontal = -gutterHorizontal / 2
        const marginVertical = -gutterVertical / 2
        if (marginHorizontal) {
            mergeStyle.marginLeft = marginHorizontal
            mergeStyle.marginRight = marginHorizontal
        }
        if (marginVertical) {
            mergeStyle.marginTop = marginVertical
            mergeStyle.marginBottom = marginVertical
        }
    }
    return (
        <div
            ref={ref}
            className={classNames}
            style={{
                ...style,
                ...mergeStyle
            }}
        >
            <RowContext.Provider value={{ gutter: [gutterHorizontal, gutterVertical], div }}>
                {children}
            </RowContext.Provider>
        </div>
    )
}
const Row = forwardRef(RowComponent)
Row.displayName = "Row"
export default Row